<template>
  <div class="content">
    <div class="address_head">
      <h4 class="f15">当前定位</h4>
      <p @click="citySelect(localCity)"><img src="../../assets/img/address_icon.png">{{localCity}}</p>
    </div>
    <div v-for="(value, key) in citeArr" :id="key"  class="city_content">
      <h4>{{key}}</h4>
      <ul>
        <li v-for="val in value" @click="citySelect(val.cityName)">{{val.cityName}}</li>
      </ul>
    </div>
    <div class="letter_content">
      <ul>
        <!--<li class="cur">B</li>-->
        <li :class="{cur:selectIndex== index}" v-for=" (val ,index) in spellCodeArr"
             @click="scrollChange(val ,index)">{{val}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import SxShopInfoApi from '@/api/manage/SxShopInfoApi';
  import $ from 'jquery'
  import '@/utils/rem'

  export default {
    data() {
      return {
        listQuery: {
          validFlag: '1',
          shopArea: ''
        },
        index: 0,
        localCity:'厦门市', //默认选择城市
        selectIndex: 0, //选择项
        shopArr: [],//门店数据Arr
        citeArr: [],//城市JSON数据Arr
        spellCodeArr: [], //字符数据Arr
        prefixRouter: '/userHome'

      }
    },
    mounted() {
      this.$nextTick(function () {
        window.addEventListener('scroll', this.menu)
      });
    },
    created() {

      if (this.$route.params.cityName) {
        this.localCity = this.$route.params.cityName;
      }
      if (this.$route.params && this.$route.params.prefixRouter) {
        this.prefixRouter = this.$route.params && this.$route.params.prefixRouter
      }
      this.fetchData();
    },
    methods: {
      citySelect(param) {

        /*if (this.positionWeb == 0) {
          this.$router.push({ path: '/userAppoint',  query: { cityName: param}})
        }else if (this.positionWeb == 1) {

        }*/

        this.$store.commit('SET_CITY', { cityId: '', cityName: param })
        this.$router.push({ path: this.prefixRouter,  query: { cityName: param }})
      },
      scrollChange(param , index) {
        let _self = this;
        let a_h = $("#"+ param).offset().top;
        _self.selectIndex = index;
        $('html, body').animate({scrollTop: a_h}, 200)
      },

      fetchData() {
        let that = this;
        this.$http.all([SxShopInfoApi.getCity(this.listQuery)])
          .then(this.$http.spread(function (perms) {
            that.citeArr = perms.cityArr;
            that.spellCodeArr = perms.spellCodeArr;
            console.log(that.citeArr);
          }));
      },
      menu() {

      }
    }
  }

</script>

<style scoped>
  @import "../../assets/css/iconfont.css";
  @import "../../assets/css/login_selfcenter.css";
  @import "../../assets/css/reset.css";
  @import "../../assets/css/order_gift.css";
  @import "../../assets/css/index_appointment.css";
</style>
